<template>
    <div class="AccidentSimpleForm">
        <div class="conditionBox">
            <!-- 时间 -->
            <el-date-picker
                popper-class="eventTimePicker"
                v-model="dateRange"
                type="daterange"
                value-format="YYYY-MM-DD"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
            ></el-date-picker>
            <!-- 类型 -->
            <div class="select">
                <span>类型:</span>
                <div class="type">
                    <el-select
                        popper-class="eventSelect"
                        v-model="eventType"
                        placeholder="生产安全事故简报添加行业"
                    >
                        <el-option
                            v-for="item in typeOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <span>等级:</span>
                <div class="level">
                    <el-select
                        popper-class="eventSelect"
                        v-model="eventLevel"
                        placeholder="生产安全事故简报添加等级"
                    >
                        <el-option
                            v-for="item in levelOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
            </div>
            <div class="inputArea">
                <div class="inputItem">
                    <span>区划:</span>
                    <el-select v-model="eventAarea" 
                    placeholder="请选择区划">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <!-- <el-input
                        v-model="eventAarea"
                        class="area"
                        placeholder="生产安全事故简报添加行政区划"
                    ></el-input> -->
                </div>
                <div class="inputItem">
                    <span>死亡</span>
                    <el-input
                        v-model="eventDeath"
                        class="deathNum"
                        placeholder="生产安全事故简报添加死亡人数"
                    ></el-input>
                    人及以上
                </div>
                <div class="inputItem">
                    <el-input
                        v-model="eventLost"
                        class="lostNum"
                        placeholder="生产安全事故简报添加经济损失"
                    ></el-input>
                    万元损失及以上
                </div>
            </div>
        </div>
        <div class="showReportBtn" @click="checkAccidentSimpleReport()">
            查看生产安全事故简报
        </div>
        <AccidentReport
            v-if="accidentReportShow"
            :accidentInfo="accidentInfo"
            :downParam="{
                eventDeath,
                eventLost,
                eventAarea,
                dateRange,
                eventType,
                eventLevel,
            }"
            @closeReport="closeReport"
        ></AccidentReport>
    </div>
</template>

<script>
import axios from "axios";
import pointeManager from "../../../pointTFSJ";
import AccidentReport from "./AccidentReport.vue";
let prodEventModel = [];
export default {
    name: "AccidentSimpleForm",
    data() {
        return {
            eventDeath: null,
            eventLost: null,
            dateRange: ["2021-01-01", "2021-12-31"], //时间区间
            eventAarea: null, //行政区划
            eventType: null, //事件行业
            typeOption: [
                // { value: null, label: "全部" },
                { value: "农林牧渔业", label: "农林牧渔业" },
                { value: "采矿业", label: "采矿业" },
                { value: "建筑业", label: "建筑业" },
                { value: "交通运输和仓储业", label: "交通运输和仓储业" },
                { value: "其他行业", label: "其他行业" },
            ],
            eventLevel: null, //事件等级
            levelOption: [
                // { value: null, label: "全部" },
                { value: "一般事故", label: "一般事故" },
                { value: "较大事故", label: "较大事故" },
                { value: "重大事故", label: "重大事故" },
                { value: "特别重大事故", label: "特别重大事故" },
            ],
            accidentInfo: {},
            accidentReportShow: false,
            options: [
                { value: "", label: "全部" },
                { value: "海口市", label: "海口" },
                { value: "万宁市", label: "万宁" },
                { value: "陵水黎族自治县", label: "陵水" },
                { value: "乐东黎族自治县", label: "乐东" },
                { value: "五指山市", label: "五指山" },
                { value: "定安县", label: "定安" },
                { value: "琼中黎族苗族自治县", label: "琼中" },
                { value: "文昌市", label: "文昌" },
                { value: "三亚市", label: "三亚" },
                { value: "琼海市", label: "琼海" },
                { value: "屯昌县", label: "屯昌" },
                { value: "儋州市", label: "儋州" },
                { value: "白沙黎族自治县", label: "白沙" },
                { value: "昌江黎族自治县", label: "昌江" },
                { value: "澄迈县", label: "澄迈" },
                { value: "保亭黎族苗族自治县", label: "保亭" },
                { value: "东方市", label: "东方" },
                { value: "临高县", label: "临高" },
                { value: "三沙市", label: "三沙" },
            ],
        };
    },
    components: { AccidentReport },
    mounted() {
        this.dateToString(new Date(), this.dateRange);
    },
    methods: {
        // 时间修改
        dateToString(date, dataRange) {
            let year = date.getFullYear();
            let month = String(Number(date.getMonth()) + 1);
            let newMonth = month.length == 1 ? "0" + month : month;
            let day = String(date.getDate());
            let newDay = day.length == 1 ? "0" + day : day;
            dataRange[0] = "2021-01-01";
            dataRange[1] = year + "-" + newMonth + "-" + newDay;
        },
        checkAccidentSimpleReport() {
            let startTime = this.dateRange
                ? `${this.dateRange[0]} 00:00:00`
                : null;
            let endTime = this.dateRange
                ? `${this.dateRange[1]} 00:00:00`
                : null;
            let industryCategory = this.eventType || null;
            let accidentLevel = this.eventLevel || null;
            let xzqh = this.eventAarea || null;
            let deathToolGeq = this.eventDeath || null;
            let directPecuniaryLossGeq = this.eventLost || null;
            axios
                .post(`${sjzxUrl}/api/safeProductDisaster/briefReport`, {
                    startTime,
                    endTime,
                    industryCategory,
                    accidentLevel,
                    xzqh,
                    deathToolGeq,
                    directPecuniaryLossGeq,
                })
                .then(res => {
                    console.log(res);
                    if (res.data.code === 200) {
                        this.accidentInfo = res.data.data;
                        this.accidentReportShow = true;
                    }
                });
        },
        closeReport() {
            this.accidentReportShow = false;
        },
    },
    beforeUnmount() {
        pointeManager.removePointByType("生产安全事故");
        prodEventModel.forEach(ele => {
            viewer.entities.remove(ele);
        });
    },
};
</script>

<style lang="stylus">
.AccidentSimpleForm {
    .el-date-editor .el-range-input{
        color:#fff;
    }
    .el-range-editor.el-input__inner, .el-date-editor .el-range-input {
        width: 100%;
        height: 30px;
        background: transparent;
    }

    .el-range-separator {
        color: #fff;
        height: unset;
    }

    .el-input__inner {
        height: 30px;
    }

    .el-select-dropdown__item span {
        color: #000;
    }

    .el-input--suffix .el-input__inner {
        padding-right: 0;
    }

    .el-input__suffix, .el-input__icon {
        line-height: 30px;
    }

    .el-select {
        flex: 1;
    }
}

.eventSelect {
    .el-select-dropdown__item {
        text-align: center;

        span {
            color: #000;
        }
    }
}

.eventTimePicker {
    .el-date-range-picker__content .el-date-range-picker__header div, .el-date-table td span {
        color: #000;
    }
}
</style>
<style lang="stylus">
.AccidentSimpleForm {
    // background: url('/images/sjzx/list.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: calc(100% - 62px);
    // margin-top: vh(30);
    display: flex;
    flex-direction: column;
    .conditionBox {
        padding: 10px 10px 10px 10px;
        flex: 1;
        .type, .level {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .inputArea {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: row;
            flex-wrap: wrap;

            .inputItem{
                width 100%
                span{
                    width 50px
                }
                .el-input{
                    width 100%
                }
            }
            .el-input.area{
                width 309px
                margin-left 5px

            }
            .el-input.deathNum{
                width 230px
                margin 0 8px
            }
            .el-input.lostNum{
                width 215px
                margin 0 8px
            }
        }

        .select {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: row;
            flex-wrap: wrap;
            // span{
            //     height:30px
            // }
            .type, .level {
                width 88%;
                height 50px
            }
        }
    }

    .eventBox {
        flex: 1;
        margin: 5px 0;
        overflow: auto;
        .activeEvent span, .eventItem:hover span {
            color: #28639c;
        }
    }

    .showReportBtn {
        width: 50%;
        height: vh(30);
        line-height: vh(30);
        text-align: center;
        cursor: pointer;
        border:1px solid #40BBF1;
        border-radius:5px;
        margin:0 auto;
    }
}
</style>
